<template>
	<view>
		<view class="head-box">
			<view class="h-tit">运营有哪些方式来说服逻辑辩证能力很强的产品经理？</view>
			<view class="h-box-cont">
				<view class="h-c-left">
					<image src="../../static/logo.png" mode=""></image>
					<view class="l-name">龙飞扬</view>
				</view>
				<view class="h-c-right">
					<view class="r-name">36回答</view>
					<view>66赞</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="xyhd">校友回答</view>
			<view class="tj-box">
				<view class="tj-tit">推荐</view>
				<image src="../../static/tuijian.png" mode=""></image>
			</view>
		</view>
		<view class="bot-cont-box">
			<view v-for="(item,index) in list" :key="index">
				<view class="head-cont">
					<view class="head-c-box">
						<image :src="item.img" mode=""></image>
						<view class="h-c-right">
							<view class="h-c-name">{{ item.name }}</view>
							<view class="h-c-time">{{ item.zhiwei }} | 校脉通</view>
						</view>
					</view>
					<view class="h-content">{{ item.content }}</view>
				</view>
				<view class="head-bottom">
					<view class="txl">
						<image src="../../static/fenxiang.png" mode=""></image>
						<view class="txl-tit">分享</view>
					</view>
					<navigator url="./reply_details" class="txl" style="margin: 0 90upx;">
						<image src="../../static/message.png" mode=""></image>
						<view class="txl-tit">100</view>
					</navigator>
					<view class="txl">
						<image src="../../static/dianzan2.png" mode=""></image>
						<view class="txl-tit">100</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bot-btn">
			<navigator url="./dynamic">
				<button type="default">添加回答</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						img:'../../static/logo.png',
						name:'张三',
						zhiwei:'16级产品经理',
						content:'比他博学 比他懂业务 和他一样有逻辑。从来没觉得运营和产品经理一定有逻辑能力上的高低。有的话，也是人的差异'
					},
					{
						img:'../../static/logo.png',
						name:'龙飞扬',
						zhiwei:'16级产品经理',
						content:'比他博学 比他懂业务 和他一样有逻辑。从来没觉得运营和产品经理一定有逻辑能力上的高低。有的话，也是人的差异'
					},
					{
						img:'../../static/logo.png',
						name:'龙飞扬',
						zhiwei:'16级产品经理',
						content:'比他博学 比他懂业务 和他一样有逻辑。从来没觉得运营和产品经理一定有逻辑能力上的高低。有的话，也是人的差异'
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.head-box{
		.h-tit{
			color: #101010;
			font-size: 36upx;
			line-height: 60upx;
			font-weight: bold;
			margin: 50upx 32upx 56upx 34upx;
		}
		.h-box-cont{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10upx 34upx;
			.h-c-left{
				display: flex;
				align-items: center;
				image{
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
				}
				.l-name{
					color: #8B8D92;
					font-size: 24upx;
					margin-left: 28upx;
				}
			}
			.h-c-right{
				display: flex;
				color: #080808;
				font-size: 24upx;
				.r-name{
					margin-right: 30upx;
				}
			}
		}
	}
	.bottom-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 50upx 24upx 54upx 12upx;
		.xyhd{
			color: #080808;
			font-size: 28upx;
			padding: 0upx 18upx;
			border-left: 6upx solid #2C65F7;
		}
		.tj-box{
			display: flex;
			align-items: center;
			.tj-tit{
				color: #080808;
				font-size: 28upx;
				font-weight: bold;
				margin-right: 18upx;
			}
			image{
				width: 30upx;
				height: 30upx;
			}
		}
	}
	.bot-cont-box{
		padding-bottom: 150upx;
		.head-cont{
			padding: 0 30upx;
			.head-c-box{
				display: flex;
				margin-bottom: 24upx;
				image{
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
				}
				.h-c-right{
					margin-left: 24upx;
					.h-c-name{
						color: #101010;
						font-size: 28upx;
						margin-bottom: 10upx;
					}
					.h-c-time{
						color: #A9ABAE;
						font-size: 24upx;
					}
				}
			}
			.h-content{
				color: #101010;
				padding: 0 7upx;
				font-size: 28upx;
				line-height: 50upx;
				margin-bottom: 45upx;
			}
		}
		.head-bottom{
			display: flex;
			margin-bottom: 70upx;
			justify-content: space-around;
			padding: 0 25upx;
			.txl{
				display: flex;
				align-items: center;
				image{
					width: 40upx;
					height: 40upx;
					margin-right: 7upx;
				}
				.txl-tit{
					color: #A9ABAE;
					font-size: 24upx;
				}
			}
		}
	}
	.bot-btn{
		width: 100%;
		background: #FFFFFF;
		padding: 28upx 34upx 22upx 36upx;
		position: fixed;
		bottom: 0;
		left: 0;
		button{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 74upx;
			color: #FFFFFF;
			background: #3291F8;
		}
	}
</style>
